<template>
	<view class="container depar-container">
		<view>
			<view class="search-box">
					<view class="search-input">
						<uni-search-bar
						radius="24" 
						placeholder="搜索医生"
						bgColor="#FFFFFF"
						@cancel="search"
						@clear="clearSearch"
						clear-button="always"
						cancel-text="搜索"
						>
						</uni-search-bar>
					</view>
			</view>
			<view class="navigator-contaier">
				<view class="naviBar" :class="{ naviBarSelected: activeIndex === i }" v-for="(item,i) in tabBar" :key="i" @click="switchBar(i)">
				{{item}}
					<view :class="[activeIndex === i ? 'iconfont arrow-down-actived':'iconfont arrow-up']">&#xe7e1;</view>
				</view>
			</view>
		</view>
		
		<scroll-view :scroll-y="true" class="list-container" @scrolltolower="onReachButton">
			<list-card-vue v-for="item in pageData.doctorList" 
			:key="item.id"
			:image="item.headPortrait"
			@imageError="imageErr(item)"
			:name="item.name"
			:job="item.job"
			:category="item.twoOfficesDirector"
			tag="认证医生"
			:belone="item.placeOrganizationName"
			:text="item.adeptIllnessJson"
			:price="(item.consultCost || '')+'元/次'"
			btn-text="立即咨询"
			@itemClick="click(item)"
			@buttonClick="click(item)"
			></list-card-vue>
			<view style="text-align: center;" v-if="pageData.doctorList.length == 0">暂无数据</view>
		</scroll-view>
		
		
		<view class="pop-container">
			<uni-popup ref="pop" type="top">
				<view class="navi-list">
					<view class="safe-zone"></view>
					<view class="list-zone">
						<view class="left-list">
							<view v-if="categoryList.length" :class="[i == Lidx ? 'text-row-actived text-row':'text-row']" @click="selectedLeft(item,i)" v-for="(item,i) in categoryList" :key="i">{{item.name}}</view>
							<view class="text-row" v-else>暂无数据</view>
						</view>
						<view class="right-list">
							<view v-if="curChildrenList.length" :class="[i== Ridx ? 'text-row-actived text-row':'text-row']" @click="selectedRight(item,i)" v-for="(item,i) in curChildrenList" :key="i">{{item.name}}</view>
							<view class="text-row" v-else>暂无数据</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script setup lang="ts">
	import listCardVue from "@/components/list-card.vue";
	import {onLoad} from "@dcloudio/uni-app"
	import { ref,reactive,watch, onMounted,nextTick } from "vue"
	import api from "@/common/api.ts"
	import {handleImageError, showToast} from "@/common/util.ts"
	import { jump } from "../../untils/tools";
	
	const tabBar:string[] = ['科室导航',"疾病导航","医馆导航"]
	let activeIndex = ref<number>(-1)
	const pop = ref(null)
	const searchBox = ref(null)
	const naviBarType = ref<string>('KS')
	let categoryList = reactive([])
	let curChildrenList = reactive([])
	let counter = ref(0)
	
	const pageData = ref({
		pages:0,
		total:0,
		doctorList:[]
	})
	const selectParams = ref<any>({
		stairOfficesDirector: "",
		twoOfficesDirector: "",
		adeptIllness: "",
		placeStoreId: "",
		keyword:"",
		pageNum:1,
		pageSize:10,
		
	})
	
	onLoad(()=>{
		getCategory()
		getDoctorInfos()
	})
	//-------------一些逻辑 start-------------
	/** @description 点击顶部tabbar **/
	const switchBar = (i:number)=>{
		if(activeIndex.value === i && pop.value.showPopup)pop.value.close()
		if(activeIndex.value != i && pop.value.showPopup){
			pop.value.close()
			activeIndex.value = i
			setTimeout(()=>{
				if(i===0){
					naviBarType.value = 'KS'
					getCategory()
				}else if(i===1){
					naviBarType.value = 'JB'
					getCategory()
				}else{
					getClinic()
				}
				pop.value.open('top')
			},300)
		}else{
			activeIndex.value = i
			pop.value.open('top')
			if(i===0){
				naviBarType.value = 'KS'
				getCategory()
			}else if(i===1){
				naviBarType.value = 'JB'
				getCategory()
			}else{
				getClinic()
			}
		}
	}
	const onReachButton = ()=>{
		if(selectParams.value.pageNum < pageData.value.pages){
			selectParams.value.pageNum++
			getDoctorInfos()
		}else{
			showToast('没有更多数据',{icon:'none',duration:1500})
		}
	}
	const click = (item:any)=>{
		jump(`/pages/index/clinic/doctorDetail?id=${item.id}`)
	}
	const clearSearch = ()=>{
		selectParams.value = {
			stairOfficesDirector: "",
			twoOfficesDirector: "",
			adeptIllness: "",
			placeStoreId: "",
			keyword:"",
			pageNum:1,
			pageSize:10,
		}
		activeIndex.value = -1
		data.value = []
		getDoctorInfos()
	}
	const search = (e:any)=>{
		let value = e.value
		selectParams.value.keyword = value
		selectParams.value.placeStoreId = ''
		data.value = []
		getDoctorInfos()
	}
	const Lidx = ref(0)
	const selectedLeft = (item:any,i:number)=>{
		Lidx.value = i
		curChildrenList = item.children
	}
	const Ridx = ref(0)
	const selectedRight = (item:any,i:number)=>{
		Ridx.value = i
		selectParams.value = {
			stairOfficesDirector: "",
			twoOfficesDirector: "",
			adeptIllness: "",
			adeptIllnessId: "",
			placeStoreId: "",
			keyword:"",
			pageNum:1,
			pageSize:10,
		}
		if(activeIndex.value === 0){
			selectParams.value.stairOfficesDirector = categoryList[Lidx.value].id
			selectParams.value.twoOfficesDirector = item.id
		}else if(activeIndex.value === 1){
			selectParams.value.adeptIllnessId=item.id
		}else{
			selectParams.value.placeStoreId = item.id
		}
		let closePopUp = true
		data.value = []
		getDoctorInfos(closePopUp)
	}
	const imageErr = (item:any)=>{
		handleImageError(item,'headPortrait')
	}
	//-------------一些逻辑 end-------------
	
	//-------------请求数据 start-------------
	/** @description 查询医生列表 **/
	let data = ref([])
	const getDoctorInfos = async (closePopUp?:boolean)=>{
		showToast('正在努力搜索',{icon:'loading',mask:true})
		let params = selectParams.value
		
		const res = await api.getDoctorInfo(params)
		data.value = data.value.concat(res?.data?.rows || [])
		pageData.value.pages = res?.data?.pages || 0
		
		if(data.value.length){
			pageData.value.doctorList = data.value.map(item=>{
				return {
					...item,
					adeptIllnessJson:(item.adeptIllnessJson.map(jack=>jack.name)).join('')
				}
			})
			if(closePopUp)pop.value.close()
			counter.value = 0
		}else{
			if(counter.value >= 3)return
			counter.value++
			showToast('没有该数据,正在为您返回',{icon:"none",mask:true,duration:1500})
			setTimeout(()=>{
				selectParams.value = {
					stairOfficesDirector: "",
					twoOfficesDirector: "",
					adeptIllness: "",
					placeStoreId: "",
					keyword:"",
					pageNum:1,
					pageSize:10,
				}
				getDoctorInfos()
				if(pop.value.showPopup)pop.value.close()
			},1000)
		}
	}
	/** @description 按分类查询医生 **/
	const getCategory = async ()=>{
		const res = await api.getBaseInfo(naviBarType.value)
		categoryList.splice(0, categoryList.length, ...(res?.data || []))
		if (categoryList.length) {
		  curChildrenList.splice(0, curChildrenList.length, ...(categoryList[0].children || []))
		  Lidx.value = 0
		  Ridx.value = 0
		} else {
		  curChildrenList.splice(0, curChildrenList.length)
		}
	}
	/** @description 获取医馆信息 **/
	const getClinic = async ()=>{
		const res = await api.getScreenClinic()
		let data = res?.data
		let arr = []
		for (var key in data) {
			arr.push({
				name:key,
				children:data[key]
			})
		}
		categoryList.splice(0,categoryList.length,...(arr || []))
		if (categoryList.length) {
		  curChildrenList.splice(0, curChildrenList.length, ...(categoryList[0].children || []))
		  Lidx.value = 0
		  Ridx.value = 0
		} else {
		  curChildrenList.splice(0, curChildrenList.length)
		}
		
	}
	//-------------请求数据 end---------------
</script>

<style  lang="scss">
   .depar-container{
		.search-box{
			background-color: #FFFFFF;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			.search-input{
				flex: 1;
				.uni-searchbar{
					background-color: #ffffff;
					.uni-searchbar__box{
						background-color: #F5F5F5 !important;
					}
					.uni-searchbar__box-icon-clear{
						margin-right: 120rpx;
					}
					.uni-searchbar__cancel{
						z-index: 10;
						padding: 0;
						position: absolute;
						right: 10rpx;
						color: #FFFFFF;
						background-color: #3AD3C1;
						border-radius: 50rpx;
						width: 120rpx;
						text-align: center;
					}
				}
			}
	   }
		
		.navigator-contaier{
			background-color: #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: relative;
			z-index: 100;
			padding: 20rpx;
			.naviBar{
				z-index: 10;
				transition: all 0.3s ease;
				padding: 10rpx 20rpx;
				border-radius: 24rpx;
				text-align: center;
				border: 2rpx solid #FFFFFF;
				background-color: #FFFFFF;
				font-size: 24rpx;
			}
			.arrow-up{
				transition: all 0.3s ease;
				display: inline-block;
				color: rgba(191, 191, 191, 1);
				transform: rotateZ(180deg);
			}
			.arrow-down-actived{
				transition: all 0.3s ease;
				display: inline-block;
				color: #299F91;
				transform: rotateZ(0deg);
			}
			.naviBarSelected {
				border: 2rpx solid #3AD3C1;
				background-color: rgba(58, 211, 193, 0.10);
				color: #299F91;
			}
		}
		
		.list-container{
			box-sizing: border-box;
			height: 1200rpx;
			padding: 20rpx;
			background-color: #F5F5F5;
		}
		
		
		.pop-container{
			.navi-list{
				height: 900rpx;
				width: 100%;
				background-color: #FFFFFF;
				.safe-zone{
					width: 100%;
					height: 22%;
				}
				.list-zone{
					display: flex;
					align-items: center;
					.text-row{
						padding: 24rpx;
					}
					.text-row-actived{
						background-color:#dfdfdf;
					}
					.left-list{
						width: 35%;
						height: 900rpx;
						overflow: auto;
						background-color: #F8F8FA;
						border-radius: 0 0 0 12px;
					}
					.right-list{
						width: 65%;
						height: 900rpx;
						overflow: auto;
						background-color: #FFFFFF;
						border-radius: 0 0 12px 0;
					}
				}
				
			}
		}
		
		
   }
</style>
